<!-- eslint-disable no-cond-assign -->
<!-- eslint-disable no-unused-vars -->
<template>
  <div class="app-container">
    <!-- 表格-条件筛区域  -->
    <el-form label-width="80px">
      <!--            <el-form-item label="订单来源">-->
      <!--                <el-button-group>-->
      <!--                    <el-button :type="(cutOrderType == '' ? 'primary':'default')" @click="searchByOrderType('')">全部-->
      <!--                    </el-button>-->
      <!--                </el-button-group>-->
      <!--            </el-form-item>-->
      <el-form-item label="状态筛选">
        <el-button-group>
          <el-button
            :type="cutOrderStatus == '' ? 'primary' : 'default'"
            @click="searchByOrderStatus('')"
          >
            全部
          </el-button>
          <el-button
            :type="cutOrderStatus == '0' ? 'primary' : 'default'"
            @click="searchByOrderStatus('0')"
          >
            待付款
          </el-button>
          <el-button
            :type="cutOrderStatus == '1' ? 'primary' : 'default'"
            @click="searchByOrderStatus('1')"
          >
            待发货
          </el-button>
          <el-button
            :type="cutOrderStatus == '2' ? 'primary' : 'default'"
            @click="searchByOrderStatus('2')"
          >
            待收货
          </el-button>
          <el-button
            :type="cutOrderStatus == '3' ? 'primary' : 'default'"
            @click="searchByOrderStatus('3')"
          >
            已完成
          </el-button>

          <el-button
            :type="cutOrderStatus == '4' ? 'primary' : 'default'"
            @click="searchByOrderStatus('11')"
          >
            已取消
          </el-button>
        </el-button-group>
      </el-form-item>
      <!--        <el-form-item label="日期筛选">-->
      <!--          <el-date-picker-->
      <!--            v-model="searchParam.SEARCH_LIKE_dateTime"-->
      <!--            type="daterange"-->
      <!--            align="right"-->
      <!--            unlink-panels-->
      <!--            range-separator="至"-->
      <!--            start-placeholder="开始日期"-->
      <!--            end-placeholder="结束日期"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <el-form-item label="模糊搜索">
        <el-input
          v-model="searchParam.SEARCH_LIKE_order_no"
          placeholder="请输入订单号搜索"
          style="width: 400px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >查询
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 表格-内容区域 -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align ? column.align : 'center'"
        :min-width="column.minWidth"
        :sortable="column.sortable"
        :fixed="column.fixed"
        :type="column.type"
        :formatter="column.formatter"
      >
        <template slot-scope="scope">
          <img
            v-if="column.imgFlag == true"
            :src="CMBASE.baseFileContext + scope.row[column.prop]"
            width="60"
            height="60"
            class="img"
          >
          <!-- 行内显示开关按钮 -->
          <el-switch
            v-else-if="column.switchFlag == true"
            v-model="scope.row[column.prop]"
            :active-value="1"
            :inactive-value="0"
            disabled
          />
          <span v-else-if="column.formatter">
            {{ column.formatter(scope.row) }}</span>

          <!-- 行内显示tag标签 -->
          <span v-else-if="column.tagFlag == true">
            <span
              v-for="item in column.tagFormatter"
              :key="item.value"
            >
              <el-tag
                v-if="item.value == scope.row[column.prop]"
                :type="item.type"
              >{{ item.text }}</el-tag>
            </span>
          </span>

          <!-- 行内显示多个值某个值 -->
          <span v-else-if="column.multipleFlag == true">
            <span
              v-for="item in column.tagFormatter"
              :key="item.value"
            >
              <span
                v-if="item.value == scope.row[column.prop]"
                :type="item.type"
              >{{ item.text }}</span>
            </span>
          </span>

          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="250"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.orderStatus == 1"
            type="warning"
            size="mini"
            @click="handleSandOrder(scope.row)"
          >发货
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="checkOrderDetail(scope.row.id)"
          >查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表格-页脚区域 -->
    <pagination
      v-show="tableTotal > 0"
      :total="tableTotal"
      :page.sync="pageRequest.pageNum"
      :limit.sync="pageRequest.pageSize"
      @pagination="getList"
    />
    <order-send-page ref="orderSend" />
    <el-dialog
      title="订单详情"
      :visible.sync="orderDetailVisible"
      :close-on-click-modal="false"
      width="70%"
      top="5vh"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="【订单信息】" name="1">
              <div>下单时间：{{ dataForm.payTime }}</div>
              <div>订单编号：{{ dataForm.orderId }}</div>
              <div>买家信息：{{ dataForm.buyerName }}</div>
              <div>买家电话：{{ dataForm.buyerPhone }}</div>
              <div>收货地址：{{ dataForm.addressDetail }}</div>
              <div>发货时间：{{ dataForm.deliveryTime }}</div>
              <div>完成时间：{{ dataForm.completeTime }}</div>
              <div>实付：{{ dataForm.paymentMoney }}</div>
              <div>买家备注：{{ dataForm.remark }}</div>
              <div>商品信息：
                <div>
                  <div>&nbsp;&nbsp;商品名称：{{ dataForm.itemInfo }}</div>
                  <div>&nbsp;&nbsp;商品规格 {{ dataForm.skuInfo }}</div>
                  <div>&nbsp;&nbsp;商品数量：{{ dataForm.goodsCount }}</div>
                </div>
              </div>

            </el-collapse-item>
          </el-collapse>
        </el-col>
        <el-col :span="12">
          <el-collapse v-model="activeNames2">
            <el-collapse-item title="【订单进度】" name="1">
              <el-steps
                :active="dataForm.stepStatus"
                finish-status="success"
                simple
                style="margin-top: 0px"
              >
                <el-step title="下单" />
                <el-step title="已付款" />
                <el-step title="已发货" />
                <el-step title="确认收货" />
              </el-steps>
              <!-- <el-steps :active="1" finish-status="error" simple style="margin-top: 0px">
                              <el-step title="退款" ></el-step>
                              <el-step title="退款审核" ></el-step>
                              <el-step title="已退款" ></el-step>
                              <el-step title="完成" ></el-step>
                            </el-steps> -->
            </el-collapse-item>
            <el-collapse-item title="【物流信息】" name="2">
              <div>
                快递公司：{{
                  dataForm.logisticsName
                    ? dataForm.logisticsName
                    : "无"
                }}
              </div>
              <div>
                运单号码：{{
                  dataForm.logisticsNum
                    ? dataForm.logisticsNum
                    : "无"
                }}
              </div>
            </el-collapse-item>
            <el-collapse-item title="【物流轨迹】" name="3">
              <el-timeline v-if="activities.length > 0">
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.upload_Time"
                >
                  {{ activity.processInfo }}
                </el-timeline-item>
              </el-timeline>
              <div v-else>暂无</div>
            </el-collapse-item>
            <!-- <el-collapse-item title="【活动信息】" name="3">
              <div>活动名称：{{ dataForm.activityName }}</div>
              <div>活动价格：{{ dataForm.activityPrice }}</div>
              <div>活动起止：{{ dataForm.activityTime }}</div>
            </el-collapse-item> -->
            <!--            <el-collapse-item title="【内部备注】" name="4">-->
            <!--              <div>-->
            <!--                <el-input v-model="orderDetail.internalRemarks" :rows="4" type="textarea" placeholder="请输入内容" style="width:85%" @input="updateView($event)" />-->
            <!--                <el-button type="primary" style="float:right" @click.native="saveRemarks">保存</el-button>-->
            <!--              </div>-->
            <!--            </el-collapse-item>-->
          </el-collapse>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          @click.native="orderDetailVisible = false"
        >关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import baseData from '@/mixin/base-data'
import orderSendPage from '@/views/goodsOrder/ordersend'
import {
  getOrderList,
  getOrderDetail,
  // eslint-disable-next-line no-unused-vars
  orderExport
} from '@/api/modules/goodsOrder'
import Pagination from '../../components/Pagination/index'

export default {
  name: 'ProductBrand',
  components: { Pagination, orderSendPage },
  directives: {},
  filters: {},
  mixins: [baseData],
  data() {
    return {
      tableKey: 0,
      tableList: [], // 表格数据源
      tableTotal: 0, // 表格总条数数据
      listLoading: true,
      pageRequest: { pageNum: 1, pageSize: 10 },
      searchParam: { SEARCH_LIKE_order_no: '', SEARCH_EQ_order_status: '' },
      dialogFormVisible: false, // 默认不显示弹出框
      operation: true, // true:新增, false:编辑
      editLoading: false, // 保存表单时loading框
      orderDetailVisible: false,
      activeNames: ['1'],
      activeNames2: ['0', '1', '2', '3'],
      activities: [],
      cutOrderType: '',
      cutOrderStatus: '',
      columns: [
        { prop: 'orderNo', label: '订单编号', sortable: false },
        { prop: 'goodsCount', label: '商品件数', sortable: false },
        { prop: 'orderMoney', label: '订单金额', sortable: false },
        // { prop: 'districtMoney', label: '优惠金额', sortable: false, width: '110px' },
        // { prop: 'paymentMoney', label: '实付金额', sortable: false },
        {
          prop: 'orderStatus',
          label: '订单状态',
          sortable: false,
          tagFlag: true,
          tagFormatter: [
            { text: '待付款', value: '0', type: 'warning' },
            { text: '待发货', value: '1' },
            { text: '已发货', value: '2' },
            { text: '已完成', value: '3' },
            // { text: '退货申请', value: '4' },
            // { text: '退货中', value: '5', type: 'danger' },
            // { text: '已退货', value: '6', type: 'info' },
            { text: '已取消', value: '11', type: 'info' }
            // { text: '已完成', value: '8', type: 'success' }
            // { text: '待成团', value: '10', type: 'success' }
          ]
        },
        { prop: 'createTime', label: '下单时间', sortable: false },
        { prop: 'payTime', label: '支付时间', sortable: false }
      ],
      fileList: [],
      goodsList: [],
      expressName: [],
      // orderStatus: [
      //   { label: '待付款', value: '0' },
      //   { label: '已付款', value: '1' },
      //   { label: '已发货', value: '2' },
      //   { label: '已签收', value: '3' },
      //   { label: '退货申请', value: '4' },
      //   { label: '退货中', value: '5' },
      //   { label: '已退货', value: '6' },
      //   { label: '已取消', value: '7' },
      //   { label: '已完成', value: '8' }
      // ],
      // 新增编辑界面数据
      dataForm: {
        id: '',
        orderNo: '',
        userId: '',
        orderStatus: '',
        goodsCount: '',
        unitPrice: '',
        orderMoney: '',
        paymentMoney: '',
        payTime: '',
        addressId: '',
        addressDetail: '',
        logisticsId: '',
        logisticsFee: '',
        completeTime: '',
        deliveryTime: '',
        createTime: '',
        goodsDetail: '',
        remark: '',
        skuId: '',
        spuId: ''
      },
      orderId: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      // 【API请求】----获取用户列表数据
      const res = await getOrderList(this.pageRequest)
      try {
        if (res.code === 0) {
          const { content, total } = res.result
          this.tableList = content
          this.tableTotal = total
        }
        this.listLoading = false
      } catch (e) {
        this.listLoading = false
        throw e
      }
    },
    // 物流公司
    handleFilterChangeType(value) {
      console.log(value)
      this.dataForm.code = value[value.length - 1]
      const codeLabel = this.$refs['codeCascader'].getCheckedNodes()[0]
        .pathLabels
      this.dataForm.name = codeLabel[codeLabel.length - 1]
    },
    // 按钮组动态渲染----【订单类型筛选】
    // searchByOrderType(type) {
    //     this.cutOrderType = type
    //     this.searchParam.SEARCH_EQ_order_type = type
    //     this.pageRequest.searchParam = this.searchParam
    //     this.getList()
    // },
    // 按钮组动态渲染----【订单状态类型筛选】
    searchByOrderStatus(type) {
      this.cutOrderStatus = type
      console.log(type)
      if (type === '') {
        console.log(1111)
        // this.getList()
        this.pageRequest = { pageNum: 1, pageSize: 10 }
      } else {
        this.searchParam.SEARCH_EQ_order_status = type
        this.pageRequest.searchParam = this.searchParam
      }

      this.getList()
    },
    // 表格数据筛选
    handleFilter() {
      this.pageRequest.searchParam = this.searchParam
      this.getList()
    },
    // 发货
    /* async sendOrderDetail(id, orderStatus) {
              if (orderStatus !== 1) {
                this.$message({ message: '此订单状态不可发货', type: 'info' })
                return
              }
              this.$confirm('确认发货吗？', '提示', {}).then(async() => {
                // 【API请求】---- 删除数据
                const res = await sendOrder({ id: id })
                try {
                  if (res.code === 0) {
                    this.getList()
                    this.$message({ message: '操作成功', type: 'success' })
                  }
                } catch (e) {
                  throw e
                }
              }).catch(() => {
                this.$message({ type: 'info', message: '已取消' })
              })
            },*/
    // 查看订单
    async checkOrderDetail(id) {
      this.listLoading = true
      // 【API请求】----获取用户列表数据
      const { result } = await getOrderDetail({ orderId: id })
      console.log(result)
      try {
        this.goodsList = []
        this.dataForm = result
        console.log(this.dataForm.status)
        if (this.dataForm.status === 0) {
          this.dataForm.stepStatus = '1'
        } else if (this.dataForm.status === 1) {
          this.dataForm.stepStatus = '2'
        } else if (this.dataForm.status === 2) {
          this.dataForm.stepStatus = '3'
        } else if (this.dataForm.status === 3) {
          this.dataForm.stepStatus = '4'
        } else {
          this.dataForm.stepStatus = '0'
        }
        this.orderDetailVisible = true
        this.listLoading = false
      } catch (e) {
        this.listLoading = false
        throw e
      }
    },
    getGoodsColor(attr) {
      const tempA = []
      const tempB = JSON.parse(attr)
      if (tempB) {
        for (let index = 0; index < tempB.length; index++) {
          const element = tempB[index]
          tempA.push(element.name + ':' + element.value)
        }
      }
      return tempA.join(',')
    },
    export() {
      this.pageRequest.searchParam = this.searchParam
      this.getList()
    },
    // 初始化表单数据，重新渲染
    initDataForm() {
      Object.assign(this.$data.dataForm, this.$options.data().dataForm)
    },

    // 【按钮点击】---发货
    handleSandOrder(row) {
      this.$refs.orderSend.dialogFormVisible = true
      this.orderNo = row.orderNo
      this.$refs.orderSend.rowId = row.id
    },

    // 关闭表单弹出框
    closeDialog() {
      this.$refs['dataForm'].resetFields()
      this.dialogFormVisible = false
    }
  }
}
</script>
